<script setup>
import BackLink from "@/components/BackLink/index.vue"
import {useRoute, useRouter} from "vue-router";
import useUserStore from "@/store/modules/user.js";
import FileUpload from "@/components/FileUpload/index.vue";
import {applyPartyMemberApi, applyStudentApi, getAllAchievementTypeApi} from "@/api/school.js";

const router = useRouter()
const route = useRoute()
const {proxy} = getCurrentInstance();

const state = reactive({
  editForm: {
    stuName: '',
    auditType: '',
    auditFile: '',
    auditCont: '',
    resultTypeId: '',
  },
  isApproval: false,
  showDia1: false,
})

const typeList = [
  {
    label: '学术成果',
    value: 1
  },
  {
    label: '实战成果',
    value: 2
  },
  {
    label: '入党',
    value: 3
  },
]

const userStore = useUserStore()


onMounted(() => {
  if (route.query?.id) {
    state.isApproval = true
  }
  state.editForm.stuName = userStore.nickName

  getLevelList()

})
const handleBack = () => {
  router.go(-1)
}

const handleSubmit = async () => {
  if (state.editForm.auditCont === '') {
    return proxy.$message.warning('请输入申请内容')
  }

  const res = await applyPartyMemberApi(state.editForm)
  if (res.code == 200) {
    proxy.$message.success('操作成功')
    handleBack()
  }
}

const handleUpload = () => {
  state.showDia1 = true
}

const getLevelList = async () => {
  const res = await getAllAchievementTypeApi()
  if (res.code == 200) {
    state.levelList = res.data
  }
}
</script>

<template>
  <div class="outBox">
    <el-card>
      <BackLink/>
      <div class="form-box">
        <div class="form-line">
          <div class="form-item">
            <div class="form-name">编号</div>
            <div class="form-cont">
              <div class="form-text">{{ state.editForm.auditCode }}</div>
            </div>
          </div>
          <div class="form-item">
            <div class="form-name">申请人</div>
            <div class="form-cont">
              <div class="form-text">{{ state.editForm.stuName }}</div>
            </div>
          </div>
          <div class="form-item">
            <div class="form-name">类别</div>
            <div class="form-cont">
              <div class="form-text">入党申请</div>
            </div>
          </div>
        </div>
        <div class="form-line" v-if="state.editForm.auditType === 1">
          <div class="form-item">
            <div class="form-name">成果类型</div>
            <div class="form-cont">
              <el-select v-model="state.editForm.resultTypeId" placeholder="请选择">
                <el-option v-for="item in state.levelList" :key="item.id" :label="item.resName" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="form-line">
          <div class="form-item">
            <div class="form-name">证明材料</div>
            <div class="form-cont">
              <div class="form-text">
                {{ state.editForm.auditFile ? '已上传' : '未上传' }}
                <el-button type="primary" link @click="handleUpload">点击上传</el-button>
              </div>

            </div>
          </div>
          <div class="form-item">
            <div class="form-name">审批人</div>
            <div class="form-cont">
              <!--              <el-input v-model="editForm.e" placeholder="模糊搜索"/>-->
            </div>
          </div>
          <div class="form-item">
            <div class="form-name">申请状态</div>
            <div class="form-cont">
              <div class="form-text">{{ state.editForm.auditStatus || '待申请' }}</div>
            </div>
          </div>
        </div>
        <div class="form-table">
          <div class="form-item">
            <div class="form-name">申请内容</div>
          </div>
          <div class="form-textArea">
            <el-input v-model="state.editForm.auditCont" type="textarea" placeholder="请输入内容"/>
          </div>
        </div>
        <div class="center-btns">
          <el-button @click="handleBack" type="primary">返回</el-button>
          <el-button @click="handleSubmit" type="primary">提交</el-button>
        </div>
      </div>
    </el-card>

    <el-dialog title="材料上传" v-model="state.showDia1" width="700" :center="true">
      <div>
        <el-form label-width="80px">
          <el-form-item label="材料">
            <FileUpload v-model:modelValue="state.editForm.auditFile"
                        :drag="true" :limit="1"/>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="state.showDia1 = false">取 消</el-button>
        <el-button type="primary" @click="state.showDia1 = false">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.form-text {
  color: var(--el-input-text-color, var(--el-text-color-regular));
  font-size: 14px;
  text-indent: 10px;
}

.text-items {
  padding: 20px;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(2, 550px);

  .text-item {
    margin-bottom: 20px;
  }

  .tit {
    font-size: 22px;
    margin-bottom: 5px;
  }

  .bottom {
    display: flex;
    justify-content: space-between;

    .time {
      color: #827e7d;
    }
  }
}

.form-table {
  border: 1px solid #e5e5e5;
  min-height: 100px;

  table {
    margin-top: 20px;
  }
}

.center-btns {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.form-textArea {
  border: 1px solid #e5e5e5;
  min-height: 100px;
  padding: 0 20px;

  :deep(.el-textarea) {
    --el-input-border-color: #fff !important;
    --el-input-focus-border: #fff !important;
    --el-input-hover-border-color: #fff !important;
    --el-input-focus-border-color: #fff !important;

  }
}

.form-box {
  .form-name {
    background: #f1f7ff;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    font-weight: bold;
    border-right: 1px solid #e5e5e5;
  }

  .form-line {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #e5e5e5;
    margin-bottom: 20px;

    .form-item {
      display: flex;
      align-items: center;

      .form-cont {
        width: calc(100% - 100px);

        :deep(.el-input) {
          --el-input-border-color: #fff !important;
          --el-input-focus-border: #fff !important;
          --el-input-focus-border-color: #fff !important;
        }
      }
    }
  }
}
</style>
